<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../../../../../node_modules/lodash/lodash.js"></script>
  <script src="../../../../../node_modules/jquery/dist/jquery.js"></script>
  <link rel="stylesheet"  href="../../../shared/library/script/layui/css/layui.css" type="text/css">
  <link rel="stylesheet"  href="./widget.css" type="text/css">
  <style>
    body {
      background: rgb(0, 13, 57);
    }
  </style>
</head>
<body>
<script>
  const data = [
    {
      "recordTime": "2023-10-17 10:00:05",
      "recordContent": "运营调度人员张三填写火警事件信息",
      "recordVideoUrl": null,
      "recordPictureUrl": null
    },
    {
      "recordTime": "2023-10-17 10:10:05",
      "recordContent": "运营调度人员张三确定事件的真实性",
      "recordVideoUrl": null,
      "recordPictureUrl": null
    },
    {
      "recordTime": "2023-10-17 10:10:05",
      "recordContent": "根据事件的智能算法，给出处置方案/n1.推荐应急组织3个/n2.推荐应急人员3个/n3.推荐应急专家3个/n4.推荐应急车辆3个/n5.推荐应急物资3个/n5.推荐应急设备3个/n",
      "recordVideoUrl": null,
      "recordPictureUrl": null
    },
    {
      "recordTime": "2023-10-17 10:10:10",
      "recordContent": "运营调度人员张三增加-协同组织",
      "recordVideoUrl": null,
      "recordPictureUrl": null
    },
    {
      "recordTime": "2023-10-17 10:12:33",
      "recordContent": "运营调度人员张三上报-协同组织1",
      "recordVideoUrl": null,
      "recordPictureUrl": null
    }
  ]
  function getTemplate(src) {
    return fetch(src).then(res => res.text())
  }
</script>
<script type="module">
  const colors = [
    '#fc0a2a', '#03adea', '#00405c', '#e57810', '#005fa3', '#1b8dd4', '#7fbb01', '#036', '#005cfe', '#ee6224', '#fc4f07', '#613853', '#ff7343',
    '#b50901', '#3d4945', '#1f5cc0', '#fd0001', '#ffbd16', '#db7131', '#59a3fc', '#db7131', '#0b76ab', '#ff0083', '#de1812', '#a086d3', '#3b7bbe',
    '#0aa6aa', '#62b0da', '#ee802e', '#1698c0', '#0c4ea2', '#97bf49', '#00b0f1', '#f47a1f', '#008bce', '#ff7800', '#46658f', '#464646', '#5e8b1c',
  ]
  const $timelineRoot = $(`<div class="base-timeline"></div>`);
  const $timeline1 = $(`<ul class="linesegs go-line" id="timeline-horizontal"></ul>`);
  const $timeline2 = $(`<div class="layui-timeline update" id="timeline-vertical"></div>`);
  $(document.body).append($timelineRoot);

  $timelineRoot.append($timeline1);
  $timelineRoot.append($timeline2);

  getTemplate('./horizontal.html').then(temp => {
    var template = _.template(temp)
    data.forEach((item, index) => {
      const $itemTemp = $(template({
        scale: item['recordTime'],
        node: item['node'],
      }))

      if (index < data.length) $itemTemp.addClass('line')

      if (+item['status'] === 1) {
        $itemTemp.addClass('radius')
      } else {
        $itemTemp.addClass('b-radius')
      }

      if (+index === data.length - 1) $itemTemp.html('<div class="arrow"></div>')

      $timeline1.append($itemTemp)
    })

    getTemplate('./vertical.html').then(async temp => {
      const imageString = await getTemplate('./image.html')
      const videoString = await getTemplate('./video.html')
      var template = _.template(temp)
      var image = _.template(imageString)
      var video = _.template(videoString)
      console.log(image, video)
      data.unshift({
        ['recordTime']: '记录更新中...',
        ['recordContent']: '',
      })
      data.forEach(item => {
        const $itemTemp = $(template({
          title: item['recordTime'],
          content: item['recordContent'],
          // image: item['recordPictureUrl'] || './abnormal.png',
          // video: item['recordVideoUrl'] || 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'
        }))

        item['recordPictureUrl'] = './abnormal.png'
        if (item['recordPictureUrl']) {
          // const image = `<img class="timeline-image" src="${item['recordPictureUrl']}" alt="图片">`
          const __image = image({ image: item['recordPictureUrl'] || './abnormal.png' })
          $itemTemp.find('.layui-timeline-footer').append($(__image));
        }

        if (item['recordVideoUrl']) {
          const video = `<video class="timeline-video" src="${item['recordVideoUrl']}" poster="./abnormal.png"></video>`
          $itemTemp.find('.layui-timeline-footer').append($(`<div class="layui-col-xs6">${video}</div>`))
        }

        $itemTemp.find('.layui-timeline-context').css('background', colors[~~(Math.random() * 100 % colors.length)])
        $timeline2.append($itemTemp)
      })

    })
  })


</script>
</body>
</html>